<template>
  <div>
    <div style="height: 20px"></div>
    <div class="helloContent">
      <van-row class="h100">
        <van-col span="8">
          <div class="flex acenter jcenter h100">
            <van-image
              @click="show = true"
              round
              width="80"
              height="80"
              fit="cover"
              :src="
                userInfo.Avatar
                  ? $addFileHead(userInfo.Avatar)
                  : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
              "
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
        </van-col>
        <van-col span="7" class="h100">
          <div class="flex jcenter fdc h100 welcome pdl20">
            <div class="mgb10">{{ userInfo.Name }}</div>
            <div>你好！</div>
          </div>
        </van-col>
        <van-col span="9">
          <div class="flex acenter jcenter h100" @click="handleMyCourse">
            <div class="myCourse">我的课程 <span></span></div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="calendar">
      <div style="font-size: 40px" class="kouzi-left">
        <svg-icon icon-class="扣子" />
      </div>
      <div style="font-size: 40px" class="kouzi-right">
        <svg-icon icon-class="扣子" />
      </div>
      <div class="content">
        <div
          class="item"
          @click="goPage('设备')"
          v-hasPermi="['DeviceAccount:DeviceManage']"
        >
          <svg-icon icon-class="装备管理" />
          装备管理
        </div>
        <div
          class="item"
          @click="goPage('工具')"
          v-hasPermi="['ToolAccount:ToolManageMobile']"
        >
          <svg-icon icon-class="工具管理" />
          工具管理
        </div>
        <div
          class="item"
          @click="goPage('6S')"
          v-hasPermi="['MySix:SixManageMobile']"
        >
          <svg-icon icon-class="6S管理" />
          6S管理
        </div>
        <div class="item" @click="goPage('课后')">
          <svg-icon icon-class="课后管理" />课后管理
        </div>
      </div>
    </div>
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
    <input
      type="file"
      ref="camera"
      accept="image/*"
      capture="environment"
      v-show="false"
      @change="handleCamera"
    />
    <input
      type="file"
      ref="photo"
      accept="image/*"
      v-show="false"
      @change="handleCamera"
    />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import useUserStore from '@/store/modules/user.js';
import { addFileHead } from '@/views/components/function/common';
import { GetUserDetail, EditUser } from '@/api/system/user.js';
import { uploadApi } from '@/api/upload/index';
import { showImagePreview } from 'vant';
const userInfo = computed(() => useUserStore().userInfo);
const router = useRouter();
const actions = [
  { name: '拍照' },
  { name: '从手机相册选择' },
  { name: '查看图片' }
];
const camera = ref({});
const photo = ref({});
const show = ref(false);

onMounted(() => {});

function goPage(name) {
  let path = '';
  let query = {};
  switch (name) {
    case '设备':
      path = '/DeviceManage/ScanCode';
      query = {
        back: '/DeviceManage/Index',
        category: 1
      };
      break;
    case '工具':
      path = '/DeviceManage/ScanCode';
      query = {
        back: '/ToolManage/Index',
        category: 2
      };
      break;
    case '6S':
      path = '/SixManage/index';
      break;
    case '课后':
      path = '/CourseManage';
      break;
  }
  router.push({ path, query });
}

async function handleCamera(e) {
  try {
    if (!e.target.files) return;
    let file = e.target.files[0];
    let res = await uploadApi(file);
    let query = {
      ...userInfo.value,
      Avatar: res.data.Path
    };
    await EditUser(query);
    useUserStore().editStoreUser(query);
  } catch (error) {
    console.log(error);
  }
}

function onSelect(val) {
  switch (val.name) {
    case '拍照':
      camera.value.value = '';
      camera.value.click();
      break;
    case '从手机相册选择':
      photo.value.value = '';
      photo.value.click();
      break;
    case '查看图片':
      showImagePreview({
        images: [addFileHead(userInfo.value.Avatar)],
        closeable: true
      });
      // window.open(addFileHead(userInfo.value.Avatar));
      // saveAs(addFileHead(userInfo.value.Avatar));
      break;
  }
}

function handleMyCourse() {
  router.push('/CourseManage/MySchedule');
}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx 20rpx 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
  background-color: white;
  margin: 0 20px 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);

  .item {
    display: flex;
    flex-direction: column;
    border: #ddd solid 1px;
    border-radius: 10rpx;
    height: 120rpx;
    background-color: white;
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 18rpx;
    .svg-icon {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 10px;
    }
    &:nth-child(1) {
      background: linear-gradient(to right bottom, #8f6cff, #4f55ff);
    }
    &:nth-child(2) {
      background: linear-gradient(to right bottom, #02abf2, #3b5dea);
    }
    &:nth-child(3) {
      background: linear-gradient(to right bottom, #ff2fcf, #ff0557);
    }
    &:nth-child(4) {
      background: linear-gradient(to right bottom, #0ce7a8, #00be7b);
    }
  }
}
.calendar {
  position: relative;
  .kouzi-left {
    position: absolute;
    left: 20px;
    top: -18px;
  }
  .kouzi-right {
    position: absolute;
    top: -18rpx;
    right: 20px;
  }
}
.helloContent {
  background-color: white;
  border-radius: 10px;
  height: 100px;
  margin: 0 20px 40px;
}
.welcome {
  font-size: 18px;
  color: #444444;
  // font-weight: bold;
}
.myCourse {
  background: linear-gradient(113deg, #606fff 29%, #7d85fc 100%);
  padding: 0px 0px 0px 16px;
  box-sizing: border-box;
  color: white;
  height: 32px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 32px;
  margin-right: 10px;
  box-shadow: 0 2px 20px rgba(100, 74, 247, 0.4);
  span {
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: white;
    padding: 0 4px;
    margin-left: 4px;
  }
}
</style>
